<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      function Person(name) {
        this.name = name
      }
      //创建了p1这个对象，它自己有一个name属性
      let p1 = new Person('a')

      //创建了p2这个对象，它自己有一个name属性
      let p2 = new Person('b')

      //上面的2个对象p1和p2已经跟一个对象建立了关系
      //建立关系的对象可能是Person,p1与person建立的对象

      //跟p1与p2建立关系的对象就是函数Person的一个属性指向的对象，
      //也就是prototype属性指向的对象

      Person.prototype.age = 18
      console.log(p1.age) //18
      console.log(p2.age) //18
      //上面都输出18，表明p1，p2与Person的prototype对象建立了关系

      //怎么建立关系的？什么时候建立关系

      //通过new Person（）的时候创建的对象，会在每一个对象（比如p1,p2)
      //里偷偷添加一个属性，名字叫__proto__,它的值就是指向构造型函数的prototype属性指向的对象

      console.log(Person.prototype)
      console.log(Person.prototype.constructor === Person)
      console.log(p1.__proto__)
      console.log(p1.__proto__ === Person.prototype)
      console.log(p2.__proto__ === Person.prototype)

      p1.name = 'aaaa'
      console.log(p1.name)
      console.log(p2.name)

      Person.prototype.age = 90
      console.log(p1.age)
      console.log(p2.age)

      ///----------高阶部分
      function Student() {}
      console.log(Student.prototype)
      console.log(Student.prototype.constructor) //输出Student
      //改掉了Student圆形对象的指向
      Student.prototype = { name: 'abc' }
      let s1 = new Student()
      console.log(s1.name)
      console.log(Student.prototype.constructor) //Object

      let o = {}
      console.log(o.constructor)

      //结论：记住一个原则：尽量不要改变构造函数的原型对象，
      // 如果改了（像54行代码代码所示）,就一定要改回constructor的指向

      Student.prototype.constructor = Student

      // 第三部分：尽量把公共的东西，放到原型中,像方法基本就会放到原型中

      function Emp(name) {
        this.name = name
      }
      Emp.prototype.work = function () {
        console.log('原型中的this指向：', this) //指向的是创建出来的对象，比如下面的e1
        console.log(this.name + ' 在编程')
      }
      let e1 = new Emp('emp 1')
      e1.work()
    </script>
  </body>
</html>
